<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/my_sty.css">
    <style>
        body {
            /* url() 为自定义鼠标样式路径 */
            cursor: url(image/pointer.png), auto;
        }

        .box {
            /* margin: 0 auto; */
            width: 500px;
            height: auto;
            background-color: rgba(235, 251, 237, 0.3);
            /* border: 1px solid; */
            border-radius: 6rem;
            /* 绝对定位 */
            position: absolute;
            left: 50%;
            top: 28%;
            /* 设置边距完成居中 */
            /* t: h/2, 0, 0,l: w/2 */
            margin: 0 0 0 -250px;
             /* box-shadow: 1px 1px 4px rgb(65, 57, 54); */
        }
        .btn{
            border-radius: 5rem;
        }

    </style>
</head>

<body>

    <div class="text-center" style="margin-top: 12rem;">
        <h1 style="font-family: '楷体';">
            欢迎注册微说说
        </h1>
    </div>
    <div class="container">
        <div class="box shadow p-3 mb-5 ">
            <form id="registerForm" action="/registerDone" method="POST">
                <div class="row">
                    <div class="col">
                        <center>
                            <input type="text" class="form-control" id="username" name="username" placeholder="用户名/手机号/邮箱"
                                style="width: 50%; text-align: center;">
                            <small id="comment" class="form-text text-muted">{{msg}}</small>
                        </center>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <center>
                            <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码"
                                style="width: 50%; text-align: center">
                        </center>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <center>
                            <input type="password" class="form-control" id="confirmpassword" name="confirmpassword"
                                placeholder="请核实密码" style="width: 50%; text-align: center">
                        </center>
                    </div>
                </div>
            </div>
            <div style="text-align: center;  margin-top: 16rem; ">
                <button type="button" id="submit" class="btn btn-outline-success" style="width: 14rem; box-shadow: 1px 1px 4px rgb(65, 57, 54);"
                    onclick="jump()">注册</button>
                <button type="button" id="reset" name="reset" class="btn btn-outline-success" style="width: 14rem;  box-shadow: 1px 1px 4px rgb(65, 57, 54);">重置</button>
            </div>
        </div>
        <!-- 按钮组件 -->
        </form>
        </div>
        <div class="alert alert-success text-center invisible" role="alert" style="width: 500px; margin: auto; margin-top: 16rem;">
            <strong>提示: </strong>
            <font id="msgId">此处为至尊林宝</font>
        </div>  
    </div>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/register_btn.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="js/register_input_focus.js"></script>
    <script src="js/a.js"></script>
    <script src="js/b.js"></script>

    <script>
        // 点击注册时 执行的方法（获取数据，进行初步验证，验证通过则通过ajax向后台提交数据；否则提示验证不通过的信息）
        function jumpOut() {
            window.location.href = "/login"
        }
        function jump() {
            let username = $('#username').val();
            let password = $('#password').val();
            let confirmpassword = $('#confirmpassword').val();
            if (username.length > 0 && password.length > 0 && password === confirmpassword) {
                axios({
                    method: "post",
                    url: "/registerDone",
                    data: $("#registerForm").serialize()
                }).then(function (res) {
                    // axios工具下，服务器真正返回的数据在返回对象的data中
                    res = res.data;
                    if (res.code === 200) {
                        window.location.href = "/login";
                    } else {
                        alert_fn(res.msg)
                    }
                }).catch((err) => {
                    alert_fn(err),
                        console.log(err);
                })
            } else {
                alert_fn("用户名、密码不能为空，并且两次密码需一致")
            }
        }
        // 这个方法包装了alert的相关行为和显示的内容
        function alert_fn(msg) {
            msg = msg || '密码不能为空，两次密码应该一致';
            // 替换提示的内容
            $('#msgId').text(msg);
            // 移除不显示的class，则alert将显示
            $('.alert').removeClass('invisible');
            // 三秒中后，给alert增加不显示的class，则alert重新隐藏
            setTimeout(() => {
                $('.alert').addClass('invisible');
            }, 3000);
        }
    </script>
</body>

</html>